<template>
	<view class="container">
		<view class="section-title">场景化</view>
		<!-- 页面内容 -->
		<scroll-view class="content" scroll-y="true">

			<!-- 场景化手风琴菜单 -->
			<view class="scenario-accordion">
				<view v-for="(scenario, index) in scenarioList" :key="index" class="accordion-item"
					:class="{ active: scenario.isExpanded }">
					<!-- 手风琴头部 -->
					<view class="accordion-header" @click="toggleAccordion(index,scenario)">
						<view class="header-left">
							<view class="icon-wrapper" :style="{ backgroundColor: scenario.color }">
								<u-icon :name="scenario.icon" color="#ffffff" size="16"></u-icon>
							</view>
							<text class="scenario-name">{{ scenario.name }}</text>
						</view>
						<u-icon :name="scenario.isExpanded ? 'arrow-up' : 'arrow-down'" color="#cccccc"
							size="16"></u-icon>
					</view>

					<!-- 手风琴内容（展开时显示） -->
					<view v-if="scenario.isExpanded" class="accordion-content">
						<!-- 自定义模板区域 -->
						<view class="custom-template">
							<u-cell v-for="(item, index) in stemplateData" :key="item.id" :isLink="false">
								<view slot="title" class="custom-ellipsis">
									{{item.content}}
								</view>
							</u-cell>
						</view>
						<view class="custom-template">
							<view class="template-header">
								<text class="template-title">{{scenario.name}}</text>
							</view>

							<!-- 文本输入区域 -->
							<view class="input-section">
								<u-textarea v-model="scenario.welcomeText" placeholder="请输入文本内容" height="120"
									maxlength="600" count placeholderClass="textarea-placeholder"></u-textarea>
								<view class="word-count">{{ scenario.welcomeText.length }}/600</view>
							</view>

							<!-- 上传附件区域 -->
							<!--     <view class="upload-section">
                <u-button 
                  @click="handleUpload(scenario)" 
                  type="default" 
                  plain 
                  size="mini"
                  icon="attachment"
                >
                  上传附件
                </u-button>
                <view v-if="scenario.attachments.length > 0" class="attachment-list">
                  <view 
                    v-for="(file, fileIndex) in scenario.attachments" 
                    :key="fileIndex" 
                    class="attachment-item"
                  >
                    <text class="file-name">{{ file.name }}</text>
                    <u-icon 
                      name="close" 
                      size="14" 
                      color="#999" 
                      @click="removeAttachment(scenario, fileIndex)"
                    ></u-icon>
                  </view>
                </view>
              </view> -->

							<!-- 创建欢迎语按钮 -->
							<u-button @click="createWelcome(scenario)" type="primary"
								:disabled="!scenario.welcomeText.trim()" customStyle="margin-top: 30rpx;">
								创建欢迎语
							</u-button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import apiurl from '../../utils/api';
	import request from '../../utils/request';

	export default {
		data() {
			return {
				stemplateData: [],
				scenarioList: [{
						name: '新客培育',
						icon: 'user',
						color: '#19be6b',
						isExpanded: false,
						welcomeText: '',
						attachments: []
					},
					{
						name: '客户生命周期',
						icon: 'clock',
						color: '#2979ff',
						isExpanded: false,
						welcomeText: '',
						attachments: []
					},
					{
						name: '客户分层',
						icon: 'grid',
						color: '#ff9900',
						isExpanded: false,
						welcomeText: '',
						attachments: []
					},
					{
						name: '唤醒客户',
						icon: 'bell',
						color: '#e43d33',
						isExpanded: false,
						welcomeText: '',
						attachments: []
					},
					{
						name: '生日SOP',
						icon: 'gift',
						color: '#8a6d3b',
						isExpanded: false,
						welcomeText: '',
						attachments: []
					},
					{
						name: '节日SOP',
						icon: 'calendar',
						color: '#9054d4',
						isExpanded: false,
						welcomeText: '',
						attachments: []
					}
				]
			}
		},
		methods: {
			// 获取每个菜单的 列表模板数据
			stemplateList(item) {
				let data = {
					sceneTitle: item,
				}
				request(apiurl.stemplateList, "GET", data)
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							this.stemplateData = res.rows;
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			// 新建欢迎语接口
			addAtemplate(data) {
				request(apiurl.addAtemplate, "POST", data)
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							this.stemplateList(data.sceneTitle);
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			// 切换手风琴展开状态
			toggleAccordion(index, scenario) {
				this.stemplateData = [];
				this.scenarioList.forEach((item, i) => {
					if (i === index) {
						item.isExpanded = !item.isExpanded;
					} else {
						item.isExpanded = false;
					}
				});
				//获取每个菜单的模板列表
				console.log(index, scenario);
				this.stemplateList(scenario.name)
			},

			// 上传附件
			handleUpload(scenario) {
				uni.chooseImage({
					count: 3,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						res.tempFilePaths.forEach((path, index) => {
							scenario.attachments.push({
								name: `附件${scenario.attachments.length + 1}.jpg`,
								path: path,
								size: this.getFileSize(path)
							});
						});

						uni.showToast({
							title: `已添加${res.tempFilePaths.length}个附件`,
							icon: 'success'
						});
					}
				});
			},

			// 删除附件
			removeAttachment(scenario, fileIndex) {
				scenario.attachments.splice(fileIndex, 1);
				uni.showToast({
					title: '附件已删除',
					icon: 'success'
				});
			},

			// 获取文件大小（模拟）
			getFileSize(path) {
				// 实际项目中需要获取真实文件大小
				return '2.5MB';
			},

			// 创建欢迎语
			createWelcome(scenario) {
				if (!scenario.welcomeText.trim()) {
					uni.showToast({
						title: '请输入欢迎语内容',
						icon: 'none'
					});
					return;
				}

				// if (scenario.welcomeText.length < 10) {
				// 	uni.showToast({
				// 		title: '欢迎语至少需要10个字',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }

				uni.showLoading({
					title: '创建中...'
				});

				// 模拟创建过程
				setTimeout(() => {
					uni.hideLoading();

					// 保存欢迎语数据
					this.saveWelcomeMessage(scenario);

					uni.showToast({
						title: `创建成功`,
						icon: 'success'
					});

					// 清空当前场景的表单
					this.resetScenarioForm(scenario);
				}, 1500);
			},

			// 保存欢迎语数据
			saveWelcomeMessage(scenario) {
				const welcomeData = {
					sceneTitle: scenario.name,
					content: scenario.welcomeText,
					// attachments: [...scenario.attachments],
					// createTime: new Date().toLocaleString(),
				};
				this.addAtemplate(welcomeData)
				console.log('保存的欢迎语数据:', welcomeData);
			},

			// 重置场景表单
			resetScenarioForm(scenario) {
				scenario.welcomeText = '';
				scenario.attachments = [];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}


	.section-title {
		height: 88rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.content {
		height: calc(100vh - 88rpx);
		padding: 30rpx;
		box-sizing: border-box;
	}



	.scenario-accordion {
		background-color: #ffffff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.accordion-item {
		border-bottom: 1rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}

		&.active {
			.accordion-header {
				background-color: #f8f9fa;
			}
		}
	}

	.accordion-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		transition: all 0.3s ease;

		&:active {
			background-color: #f0f0f0;
		}
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.icon-wrapper {
		width: 60rpx;
		height: 60rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.scenario-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.accordion-content {
		padding: 0 30rpx 30rpx;
		animation: slideDown 0.3s ease-out;
		// background-color: #f8f9fa
	}

	.custom-template {
		// background-color: #f8f9fa;
		border-radius: 8rpx;
		padding: 24rpx;
	}

	.template-header {
		margin-bottom: 20rpx;
	}

	.template-title {
		font-size: 26rpx;
		font-weight: 600;
		color: #333333;
	}

	.input-section {
		position: relative;
		margin-bottom: 20rpx;
	}

	.word-count {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		font-size: 24rpx;
		color: #999999;
		background-color: #ffffff;
		padding: 0 10rpx;
		border-radius: 4rpx;
	}

	.upload-section {
		margin-bottom: 20rpx;
	}

	.attachment-list {
		margin-top: 16rpx;
	}

	.attachment-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		padding: 16rpx;
		border-radius: 6rpx;
		margin-bottom: 10rpx;
		border: 1rpx solid #e8e8e8;
	}

	.file-name {
		font-size: 24rpx;
		color: #666666;
	}

	/* 自定义uView组件样式 */
	::v-deep .u-textarea__field {
		font-size: 28rpx;
		line-height: 1.5;
	}

	::v-deep .textarea-placeholder {
		color: #cccccc;
		font-size: 28rpx;
	}

	::v-deep .u-button--default {
		border-color: #dcdfe6;
		color: #606266;
	}

	::v-deep .u-button--primary {
		background-color: #2979ff;
	}

	::v-deep .u-button--disabled {
		background-color: #c0c4cc !important;
		color: #ffffff !important;
	}

	/* 动画效果 */
	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-10rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.accordion-item {
		transition: all 0.3s ease;
	}

	/* 响应式设计 */
	@media (max-width: 375px) {
		.content {
			padding: 20rpx;
		}

		.accordion-header {
			padding: 24rpx;
		}

		.accordion-content {
			padding: 0 24rpx 24rpx;
		}

		.custom-template {
			padding: 20rpx;
		}
	}

	.custom-ellipsis {
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 550rpx;
		// max-width: 100%;
	}
</style>